.Button {
  cursor: pointer;
  color: var(--primary-color);
}

.clear {
  border: none;
  background: none;
  outline: none;
}

.outline {
  padding: 10px 15px;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  background: none;
}

.background {
  background: var(--bg-color);
  color: var(--primary-color);
  border: none;
}

.backgroundInverted {
  background: var(--inverted-bg-color);
  color: var(--inverted-primary-color);
  border: none;
}

.square {
  padding: 0;
}

.square.size_m {
  width: var(--font-line-m);
  height: var(--font-line-m);
  font: var(--font-m)
}

.square.size_l {
  width: var(--font-line-l);
  height: var(--font-line-l);
  font: var(--font-ml)
}

.square.size_xl {
  width: var(--font-line-xl);
  height: var(--font-line-xl);
  font: var(--font-xl)
}
